<div fxLayout="column" fxLayoutAlign="none" class="app-content">

  <md-toolbar class="mat-elevation-z6">
    <button md-icon-button routerLink="/" routerLinkActive="active">
      <md-icon svgIcon="docker-logo" style="height: 40px; width: 40px;">docker-logo</md-icon>
    </button>

    <span style="flex: 1 1 auto;"></span>

    <button md-icon-button i18n-title="container" title="Containers" routerLink="/containers" routerLinkActive="active">
      <md-icon>grain</md-icon>
    </button>
    <button md-icon-button i18n-title="image" title="Images" routerLink="/images" routerLinkActive="active">
      <md-icon>view_comfy</md-icon>
    </button>

    <button md-icon-button [mdMenuTriggerFor]="menu">
      <md-icon>more_vert</md-icon>
    </button>
    <md-menu #menu="mdMenu">
      <button md-menu-item [hidden]="localeName == 'zh-CN'" (click)="onChangeLanguage('zh-CN')">
        <md-icon>translate</md-icon>
        <span i18n>Simplified Chinese</span>
      </button>
      <button md-menu-item [hidden]="!localeName || localeName == 'en-US'" (click)="onChangeLanguage('en-US')">
        <md-icon>translate</md-icon>
        <span i18n>English</span>
      </button>
    </md-menu>

  </md-toolbar>

  <!-- Routed views go here -->
  <div fxLayout="row" fxLayoutAlign="center center" *ngIf="loading">
    <md-progress-bar mode='indeterminate'></md-progress-bar>
  </div>
  <router-outlet></router-outlet>
</div>
